<template>
  <view class="container">
    <FilterNavbar :searchList="searchList" v-model:queryParam="queryParam" @confirm="onFilterNavbarConfirm">
      <template #center>
        <view class="navbar-title"> 订单同步记录 </view>
      </template>
    </FilterNavbar>
    <ve-search-bar placeholder="请输入渠道账号/同步人" :model-value="queryParam.keyword" @search="searchBarSearch" />
    <ve-tabs :actived="tabActived" :list="dict.statusEnum" @change="tabsChange"></ve-tabs>
    <scroll-view
      scroll-y
      :scroll-top="scrollTop"
      :scroll-with-animation="true"
      refresher-enabled
      :refresher-triggered="refreshStatus"
      :enable-back-to-top="true"
      @refresherrefresh="resetRefresh(true)"
      @scrolltolower="reachBottom"
    >
      <view class="record-list">
        <block v-for="item in (dataSource as any)" :key="item">
          <ve-card
            :customContentStyle="{
              padding: '0 24rpx 0.1rpx',
            }"
            :title="`${item.sourceName} ${item.username}`"
            :sub-title="item.statusName"
            :type="getStatus(item.status)"
          >
            <ve-cell label="同步人">{{ item.syncStaffName || '-' }}</ve-cell>
            <ve-cell label="同步方式">{{ item.typeName || '-' }}</ve-cell>
            <ve-cell label="开始同步时间">{{ item.startTime || '-' }}</ve-cell>
            <ve-cell label="结束同步时间">{{ item.endTime || '-' }}</ve-cell>
            <ve-cell label="订单同步的时间范围">{{ item.orderSyncTimeRange || '-' }}</ve-cell>
            <ve-cell-val label="同步订单数" :value="item.syncCount"></ve-cell-val>
            <view class="errMsg-box" v-if="item.errorMsg">
              <text class="iconfont ve-icon-warning icon-class"></text>
              <text>{{ item.errorMsg }}</text>
            </view>
          </ve-card>
        </block>
        <!-- 加载结束列表为空时展示 -->
        <ve-empty v-if="dataSource.length == 0 && loadStatus == 'nomore'"></ve-empty>
        <!-- 底部加载状态 -->
        <ve-load-more v-else :status="loadStatus" bgColor="#F7F7F9"></ve-load-more>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
  import FilterNavbar from '@/components/FilterNavbar'

  import { computed, onMounted, ref } from 'vue'
  import { usePageDict } from '@/hooks/useDict'
  import useList from '@/hooks/useList'
  import { getOtaOrderCount } from '@/api/order/ota'

  const dict = usePageDict('syncOrderDicr', (val: any) => {
    if (val.statusEnum[0].label === '全部') return
    val.statusEnum.unshift({ label: '全部', value: '' })
  })

  const tabActived = ref(0)
  const queryParam = ref({})

  const { resetRefresh, reachBottom, loadData, scrollTop, loadStatus, refreshStatus, dataSource } = useList(
    '/V5/channelSyncRecord/pageList',
    queryParam,
  )

  const getStatus = (status: number) => {
    switch (status) {
      case 0:
        return 'gray'
      case 1:
        return 'yellow'
      case 3:
        return 'danger'
    }
  }

  const searchList = computed(() => {
    return [
      {
        prop: 'sourceId',
        label: 'OTA渠道',
        type: 'picker',
        attrs: {
          options: dict.thirdpartySourceEnum,
        },
      },
      {
        prop: 'type',
        label: '同步方式',
        type: 'picker',
        attrs: {
          options: dict.typeEnum,
        },
      },
      {
        prop: ['startTimeStart', 'startTimeEnd'],
        label: '开始同步时间',
        type: 'daterange-picker',
      },
      {
        prop: ['endTimeStart', 'endTimeEnd'],
        label: '完成同步时间',
        type: 'daterange-picker',
      },
    ]
  })

  const searchBarSearch = (val: any) => {
    queryParam.value = {
      ...queryParam.value,
      keyword: val,
    }
    getOtaOrderCountData({ ...queryParam.value, status: '' })
    resetRefresh()
  }

  const onFilterNavbarConfirm = (params: any) => {
    queryParam.value = {
      ...queryParam.value,
      ...params,
    }
    resetRefresh()
    getOtaOrderCountData({ ...queryParam.value, status: '' })
  }

  const tabsChange = (index: any, val: any) => {
    queryParam.value = {
      ...queryParam.value,
      status: val.value,
    }
    resetRefresh()
    getOtaOrderCountData({
      ...queryParam.value,
      status: '',
    })
  }

  const getOtaOrderCountData = async (params = {}) => {
    const res = await getOtaOrderCount(params)
    dict.statusEnum[1].num = res.result?.status1
    dict.statusEnum[3].num = res.result?.status3
  }

  onMounted(() => {
    var pushOrderSync = uni.getStorageSync('pushOrderSync')
    if (pushOrderSync) {
      queryParam.value.startTimeStart = pushOrderSync.startTime
      queryParam.value.sourceId = pushOrderSync.sourceId
      queryParam.value.type = pushOrderSync.otaType
      switch (pushOrderSync.status) {
        case 0:
          tabActived.value = 2
          break
        case 3:
          tabActived.value = 3
          break
      }
    }
    loadData()
    getOtaOrderCountData(queryParam.value)
    uni.removeStorageSync('pushOrderSync')
  })
</script>

<style scoped>
  .container {
    height: 100vh;
  }
  .manager-tabs {
    background-color: #fff;
    margin-top: -20rpx;
  }
  .record-list {
    padding: 24rpx 24rpx;
  }
  .errMsg-box {
    font-size: 28rpx;
    font-weight: 400;
    color: #f53f3f;
    padding-bottom: 32rpx;
  }
  .icon-class {
    font-size: 32rpx;
    margin-right: 8rpx;
    display: inline;
  }
</style>
